<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矩形</title>
</head>

<body>
    <canvas id="c1" width="500" height="500"></canvas>
	<script>
		// 1.找到画布对象
	    var c1 = document.getElementById('c1');
		console.log([c1]);
		
		// 2.上下文对象(画笔)
		var ctx = c1.getContext('2d');
		console.log(ctx);
		
		// 3.绘制路径
		ctx.rect(50,50,200,200);//x,y,w,h
		
		// 4.填充
		ctx.fillStyle = 'aqua';
		ctx.fill();
		
		// 5.描边,渲染路径
		ctx.lineWidth = '10';
		ctx.strokeStyle = 'red';
		ctx.stroke();
	</script>
</body>

</html>